<template>
    <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="完成度" prop="complete_percentage" :error="errors.complete_percentage">
            <el-input v-model.number="form.complete_percentage" min="0" max="100" clearable>
                <template slot="append">%</template>
            </el-input>

        </el-form-item>
        <!--<el-form-item label="步骤" prop="step" :error="errors.step">-->
        <!--<el-input v-model.number="form.step" clearable></el-input>-->
        <!--</el-form-item>-->
        <el-form-item>
            <el-button type="primary" @click="onSubmit">完成</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
    export default {

        props: {skillId: {type: Number, required: true}, careerId: {type: Number, required: true}},
        data() {
            return {
                form: {
                    complete_percentage: null,
                    // step: 0
                },
                errors: {}
            }
        },
        methods: {
            onSubmit() {
                // console.log(form);
                axios.put('careers/' + this.careerId + '/skills/' + this.skillId, this.form).then((response) => {
                    this.errors = {};
                    this.$message.success('已成功保存');
                    this.$emit('complete', response.data.data);
                }).catch((error) => {
                    switch (error.response.status) {
                        case 422://表单校验失败
                            this.errors = _.mapValues(error.response.data.errors, (item) => {
                                return item.join(' ');
                            });
                            break;
                    }
                });
            }, getNode() {
                axios.get('careers/' + this.careerId + '/skills/' + this.skillId).then((response) => {
                    this.form.complete_percentage = response.data.pivot.complete_percentage;
                })
            }
        },
        watch: {
            skillId() {
                this.getNode();
            }
        },
        created() {
            this.getNode();
        }
    }
</script>

<style scoped>

</style>